// JavaScript Document

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30;		
var END_TIME = new Date(2018,3,12,12,0,0,0);
var currentShowTimeSeconds  = 0;
var balls = [];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

var countDown = {

	getCurrentShowTimeSeconds : function(){
		var currentTime = new Date();
		var ret = Math.round((END_TIME.getTime() - currentTime.getTime()) / 1000);	
		return ret >= 0 ? ret : 0 ;
	},
	//练习：绘制一个等腰直角三角形
	showTriangle : function(){
		var canvas = document.getElementById("canvas");
		canvas.width = 800;
		canvas.height = 800;
		var context = canvas.getContext("2d");
		context.moveTo(100,100);
		context.lineTo(700,700);
		context.lineTo(100,700);
		context.lineTo(100,100);
		context.strokeStyle="red";
		context.lineWidth=5;
		context.stroke();

	},
	//练习：绘制一个圆形
	showCircular : function(){
		var canvas = document.getElementById("canvas");
		canvas.width = 800;
		canvas.height = 800;
		var context = canvas.getContext("2d");
		context.beginPath();
		context.arc(400,400,350,0,2*Math.PI);
		context.strokeStyle="red";
		context.lineWidth=5;
		context.stroke();
	},
	//获取Canvas对象
	myCanvas : function(){
		var canvas = document.getElementById("canvas");
		canvas.width = WINDOW_WIDTH;
		canvas.height = WINDOW_HEIGHT;
		return canvas;
	},
	//获取上下文对象
	myContext : function(canvas){
		return canvas ? canvas.getContext("2d") : countDown.myCanvas().getContext("2d");
	},
	//渲染时钟
	render : function(){
		var currentShowTimeSeconds = countDown.getCurrentShowTimeSeconds();
		var hours = parseInt(currentShowTimeSeconds / 3600);
		var minutes = parseInt((currentShowTimeSeconds - hours * 3600)/ 60);
		var seconds = currentShowTimeSeconds % 60;

		var cxt = countDown.myContext();
		var x = MARGIN_LEFT;
		var y = MARGIN_TOP;
		cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
		
		countDown.renderDigit(x, y, parseInt(hours / 10), cxt);
		countDown.renderDigit(x + 15 * (RADIUS + 1), y, parseInt(hours % 10), cxt);
		countDown.renderDigit(x + 30 * (RADIUS + 1), y, 10, cxt);
		countDown.renderDigit(x + 39 * (RADIUS + 1), y, parseInt(minutes / 10), cxt);
		countDown.renderDigit(x + 54 * (RADIUS + 1), y, parseInt(minutes % 10), cxt);
		countDown.renderDigit(x + 69 * (RADIUS + 1), y, 10, cxt);
		countDown.renderDigit(x + 78 * (RADIUS + 1), y, parseInt(seconds / 10), cxt);
		countDown.renderDigit(x + 93 * (RADIUS + 1), y, parseInt(seconds % 10), cxt);

		//绘制小球
		for(var i = 0; i < balls.length ; i++){
			cxt.fillStyle = balls[i].color;
			
			cxt.beginPath();
			cxt.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
			cxt.closePath();
	
			cxt.fill();
		}
	},
	renderDigit : function(x,y,num,cxt){

		cxt.fillStyle = "rgb(0,102,153)";
		for(i = 0; i < digit[num].length; i++){
			for(j = 0; j < digit[num][i].length; j++){
				if(digit[num][i][j] == 1){
					cxt.beginPath();
					cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS , 0 , 2*Math.PI );
					cxt.closePath();
					cxt.fill();
				}
			}
		}
	},
	update : function(){
		var nextShowTimeSeconds = countDown.getCurrentShowTimeSeconds();
		
		var curHours = parseInt(currentShowTimeSeconds / 3600);
		var curMinutes = parseInt((currentShowTimeSeconds - curHours * 3600)/ 60);
		var curSeconds = currentShowTimeSeconds % 60;
		
		var nextHours = parseInt(nextShowTimeSeconds / 3600);
		var nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600)/ 60);
		var nextSeconds = nextShowTimeSeconds % 60;
		
		if(curSeconds != nextSeconds){
			if( parseInt(curHours/10) != parseInt(nextHours/10) ){
				countDown.addBalls( MARGIN_LEFT + 0 , MARGIN_TOP , parseInt(curHours/10) );
			}
			if( parseInt(curHours%10) != parseInt(nextHours%10) ){
				countDown.addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHours/10) );
			}
	
			if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){
				countDown.addBalls( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes/10) );
			}
			if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
				countDown.addBalls( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes%10) );
			}
	
			if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
				countDown.addBalls( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(curSeconds/10) );
			}
			if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
				countDown.addBalls( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds%10) );
			}

			currentShowTimeSeconds = nextShowTimeSeconds;	
		}	
		countDown.updateBalls();
		
	},
	addBalls : function(x,y,num){
		
		for(i = 0; i < digit[num].length; i++){
			for(j = 0; j < digit[num][i].length; j++){
				if(digit[num][i][j] == 1){
					var aBall= {
						x:x+j*2*(RADIUS+1)+(RADIUS+1),
						y:y+i*2*(RADIUS+1)+(RADIUS+1),
						g:1.5+Math.random(),
						vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,
						vy:-5,
						color: colors[ Math.floor( Math.random()*colors.length ) ]
					}
					balls.push( aBall );
				}
			}
		}
	},
	updateBalls : function(){
		for( var i = 0 ; i < balls.length ; i ++ ){
	
			balls[i].x += balls[i].vx;
			balls[i].y += balls[i].vy;
			balls[i].vy += balls[i].g;
	
			if( balls[i].y >= WINDOW_HEIGHT-RADIUS ){
				balls[i].y = WINDOW_HEIGHT-RADIUS;
				balls[i].vy = - balls[i].vy*0.75;
			}
		}
		//性能优化：如果小球跳出视图，则将其从数组中移除
		var cnt = 0
		for( var i = 0 ; i < balls.length ; i ++ )
			if( balls[i].x + RADIUS > 0 && balls[i].x -RADIUS < WINDOW_WIDTH )
				balls[cnt++] = balls[i]
	
		while( balls.length > cnt ){
			balls.pop();
		}
	}
} 